//设置三角形图标
%triangle-basic{
  content:"";
  height: 0;
  width: 0;
  overflow:hidden;
}
@mixin triangle($direction:top, $size:7px, $borderColor:color(gray) ) {
  @extend %triangle-basic;
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } @else {
    border-style: $direction;
    border-width: $size;
    border-color: $borderColor;
  }
}